<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Responsive Timeline</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script src="js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
    <header class="clearfix">
        <h1>Responsive Timeline</h1>
    </header>
    <div class="main">
        <ul class="tmtimeline">
            <li>
                <time class="tmtime"><span>2016-05-01</span> <span>18:30</span></time>
                <div class="tmlabel">
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, neque.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid architecto at atque consequatur
                        consequuntur corporis dolor facere, fuga laborum natus, nihil rem repudiandae temporibus ullam
                        ut veniam veritatis voluptas voluptates. Aliquam assumenda eius exercitationem hic ipsa numquam
                        quam quis ratione, repellat, reprehenderit sunt, ullam! Accusamus, ad aliquid asperiores
                        aspernatur at consequuntur cupiditate delectus deleniti dignissimos doloremque ea enim error, et
                        excepturi explicabo facere fuga illo impedit iste laudantium minima molestias non nulla odit
                        optio quos repellat sequi similique tempore vel veniam, vero voluptates voluptatum! At, cum
                        deleniti, eaque enim fugiat illo in molestiae necessitatibus non obcaecati perferendis possimus
                        temporibus tenetur.</p>
                </div>
            </li>
            <li>
                <time class="tmtime"><span>2016-04-01</span> <span>12:30</span></time>
                <div class="tmlabel">
                    <h2>Lorem ipsum dolor sit amet.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet beatae cupiditate debitis
                        doloribus eius eligendi, error est eveniet ipsam laborum laudantium magnam natus non omnis
                        placeat praesentium quas repellat reprehenderit saepe soluta sunt temporibus totam vero
                        voluptatem voluptatibus? Ab atque consequuntur cupiditate dolorum ducimus eligendi error eveniet
                        excepturi facilis harum, in iste nihil obcaecati officiis, quas quasi qui quia quos reiciendis
                        rem rerum sapiente totam unde voluptatibus voluptatum? Dolor dolore dolorum ducimus et fugit
                        iusto modi odit quibusdam vitae voluptas!</p>
                </div>
            </li>
            <li>
                <time class="tmtime"><span>2016-03-21</span> <span>11:30</span></time>
                <div class="tmlabel">
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dignissimos dolor dolores error
                        quisquam vero, voluptatem. Accusantium consectetur consequuntur debitis dicta dolor dolores
                        fugit laborum libero molestiae, natus nobis odit. Ab aliquid consequuntur, dolorum eius eligendi
                        impedit ipsam neque odit, perspiciatis quis, similique unde voluptate! Corporis necessitatibus
                        odit repellendus tempora.</p>
                </div>
            </li>
            <li>
                <time class="tmtime"><span>2016-02-11</span> <span>9:45</span></time>
                <div class="tmlabel">
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing.</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, dolorem id inventore iste
                        odit perferendis provident? A cupiditate doloribus, enim et fuga iste nemo non nostrum omnis
                        perspiciatis praesentium provident, quas repellendus rerum sit tempore voluptates. Aliquam
                        distinctio fugit hic maiores ullam voluptate! Aspernatur autem blanditiis deleniti dolor dolores
                        dolorum enim et illum ipsa iure laboriosam, natus officiis ullam voluptas?</p>
                </div>
            </li>
            <li>
                <time class="tmtime"><span>2016-02-11</span> <span>9:45</span></time>
                <div class="tmlabel">
                    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas?</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error eum ex iusto magnam obcaecati.
                        Adipisci deserunt dicta dolorem ea enim et eum labore laboriosam, quos reprehenderit sequi vero
                        vitae voluptatum.</p>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>
